<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{vendor/purecounter/purecounter.js}"></script>
    <script th:src="@{vendor/aos/aos.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{vendor/bootstrap/js/bootstrap.js}"></script>
    <script th:src="@{vendor/glightbox/js/glightbox.min.js}"></script>
    <script th:src="@{vendor/isotope-layout/isotope.pkgd.min.js}"></script>
<!--    <script th:src="@{vendor/swiper/swiper-bundle.min.js}"></script>-->
    <script th:src="@{vendor/php-email-form/validate.js}"></script>
    <script th:src="@{vendor/jq/jquery-3.4.1.js}"></script>
    <style>
        .demoContainer{
            display: flex;
            background-color: #f3f5f6;
            flex-direction: column;
            align-items: center;
        }
        .demoContainer h1 ,.pain h1 ,.func h1{
            font-size: 35px;
            font-weight: bold;
            text-transform: uppercase;
            position: relative;
            color: #3a3939;
            border-bottom-style: solid;
            border-bottom-color: #5ea8f1;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            border-bottom-width: 5px;
        }
        .box{
            /*margin-top: 20px;*/
            display: flex;
            width: 100%;
            background-color: #fff;
            flex-direction: column;
            align-items: center;
        }
        .box-item{
            background-color: #f6eed7;
            display: flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap: wrap;
            /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
            width: 80%;
            margin: 15px;//item之间相距距离
        }
        .box-item img {
            width: 40%;
            min-width: 400px;
            /*margin-left: 10px;*/
        }
        .text{
            display: flex;
            flex-direction: column;
            width: 60%;
        }
        .text h2{
            font-size: 35px;
            font-weight: bold;
            text-transform: uppercase;
            justify-content: center;
            align-items: center;
            position: relative;
            margin: 10px 20px;
        }
        .text p{
            color: #666666;
            margin: 10px 20px;
        }
        .text li::marker{
            color: rgba(72, 135, 231, 0.7);
        }
        .text .bdli li{
            background: #598df5;
            border-radius: 30px;
            border: 1px solid #eaecee;
            padding: 5px 13px;
            font-size: 15px;
            color: #333;
            margin-top: 20px;
            margin-right: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 150px;
            flex-wrap: wrap;
        }
        .pain{
            width: 100%;
            background: #efe8e8;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .pain h2{
            font-size: 30px;
            text-align: center;
        }
        .pain-box{
            width: 80%;
            display: flex;
            flex-direction: row;
            align-items: center;
            /*border: solid;*/
        }
        .pb-swiper{
            margin-left: 10px;
            height: 600px;
            width: 90%;
        }
        .pb-text{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-items: center;
            /*border: solid;*/
        }
        .pb-text Ul{
            list-style-type: none;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .pb-text li{
            padding: 25px 20px;
            height: 160px;
            width: 40%;
            background: #fff;
            color: #666666;
            font-size: 15px;
            box-shadow:  0 -1px 15px 0 rgba(0,0,0,.05);
            margin: 10px;
            transition: background-color .4s ease,box-shadow .4s ease;
            /*border: solid;*/
        }
        .pb-text li:hover {
            background-image: url(/img/bgimg.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            color: #fff;
            font-size: 20px;
            transition: 0.3s;
        }
        .func{
            display: flex;
            flex-direction: column;
            width: 100%;
            background-color: #f5f3f3;
            align-items: center;
        }
        .func h2{
            font-size: 30px;
            border-bottom-style: solid;
            border-bottom-color: #f38202;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            border-bottom-width: 5px;
        }
        .func-item{
            width: 80%;
            display: flex;
            flex-direction: row;
            margin: 15px;//item之间相距距离
        }
        .func img{
            width: 50%;
            height: 500px;
        }
        .func-text span{
            color: #333;
            font-size: 22px;
            font-weight: 700;
            padding-left: 15px;
        }
        .func-text li{
            margin: 15px;//item之间相距距离
        color: #666666;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
<div class="demoContainer">
    <h1>pack线生产制造系统PMES</h1>
    <div class="box">
        <div class="box-item">
            <div class="text">
                <h2>工厂信息建模</h2>
                <p>对产品物料、生产流程、工艺信息等进行统一录入管理</p>
                <ul>
                    <li>产品生产需要用到的物料、半成品、成品各种工艺数据</li>
                    <li>产品生产所需经过加工工序、流程顺序，时间、判断标准等信息录入及管理</li>
                    <li>产品条码规则，设备上传参数字典数据管理</li>
                </ul>
                <ul class="bdli">
                    <li>物料种类</li>
                    <li>信号信息</li>
                    <li>物料来源</li>
                    <li>条码规则</li>
                    <li>工艺信息</li>
                    <li>流程信息</li>
                    <li>批次信息</li>
                    <li>工艺组</li>
                </ul>
            </div>
            <img th:src="@{img/func/pack-2.jpg}"  alt="...">
        </div>
        <div class="box-item">
            <div class="text">
                <h2>生产管理</h2>
                <p></p>
                <ul>
                    <li>针对生产工序建立产品模型，电芯分容、OCVIR测试、配组、电芯串并关联、保护板测试、电池包组装点焊、综合测试、老化测试、成品装箱等。</li>
                    <li>根据订单建立排产生产工单，按生产工序工艺分配下发任务单。</li>
                    <li>自动化检测设备对接集成，实现生产数据的实时采集、分析及存档。</li>
                </ul>
                <ul class="bdli">
                    <li>生产工单</li>
                    <li>生产流程</li>
                    <li>产品工艺</li>
                    <li>作业控制</li>
                    <li>生产数据采集</li>
                    <li>过程控制</li>
                    <li>异常反馈</li>
                    <li>生产看板</li>
                </ul>
            </div>
            <img th:src="@{img/func/pack-1.jpg}"  alt="...">
        </div>
        <div class="box-item">
            <div class="text">
                <h2>报表查询</h2>
                <p>提供可靠数据，实时采集，为质量分析提供强大的基础数据。</p>
                <ul>
                    <li>产品工单产量看板报表</li>
                    <li>重要物料的来源追溯，可追溯电池来源厂商、购买日期等信息</li>
                    <li>产品全流程报表扫码追溯，查询工序测试数据，可防错防呆</li>
                </ul>
                <ul class="bdli">
                    <li>数据采集</li>
                    <li>各工序测试数据</li>
                    <li>产品条码查询生产数据</li>
                    <li>工序查询生产数据</li>
                    <li>产量看板</li>
                    <li>电芯数据</li>
                    <li>产品关联信息</li>
                    <li>工单完成进度合格率信息看板</li>
                </ul>
            </div>
            <img th:src="@{img/func/pack-3.jpg}"  alt="...">
        </div>
    </div>
    <div class="pain">
        <h1>解决痛点</h1>
        <div class="pain-box">
            <div class="pb-swiper">
                <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel" data-bs-interval="8000">
                    <div class="carousel-inner" >
                        <div class="carousel-item active">
                            <img th:src="@{img/solutions/MES_1.jpg}"  class="pb-swiper"  alt="...">
                        </div>
                        <div class="carousel-item">
                            <img th:src="@{img/solutions/MES_2.jpg}"  class="pb-swiper"  alt="...">
                        </div>
                        <div class="carousel-item">
                            <img th:src="@{img/solutions/MES_3.jpg}"  class="pb-swiper"  alt="...">
                        </div>
                    </div>
<!--                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">-->
<!--                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
<!--                        <span class="visually-hidden">Previous</span>-->
<!--                    </button>-->
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
            <div class="pb-text">
                <ul>
                    <li>
                        <h2>纸质化信息</h2>
                        <p>纸质化信息保存和传递导致数据丢失</p>
                    </li>
                    <li>
                        <h2>信息滞后</h2>
                        <p>品质、产量等信息传递不及时，导致决策延迟</p>
                    </li>
                    <li>
                        <h2>追溯困难</h2>
                        <p>追溯生产品质信息，需要翻查纸质记录</p>
                    </li>
                    <li>
                        <h2>数据失真</h2>
                        <p>人工记录数据，会增加数据不准备的概率</p>
                    </li>
                    <li>
                        <h2>无关键物料追溯</h2>
                        <p>异常品的无法追溯相关物料供应商与生产批次信息</p>
                    </li>
                    <li>
                        <h2>产品拦截困难</h2>
                        <p>在制品、成品批量问题拦截困难</p>
                    </li>
                </ul>
            </div>
            </div>
        </div>
    <div class="func">
        <h1>功能展示</h1>
        <div class="func-item">
            <img th:src="@{img/func/pack-4.png}"  alt="...">
            <div class="func-text">
                <span>车间看板</span>
                <ul>
                    <li>实时监控车间设备运行状态</li>
                    <li>车间正在生产工单、批次、任务单完成进度</li>
                </ul>
            </div>
        </div>
        <div class="func-item">
            <img th:src="@{img/func/生产排产.jpg}"  alt="...">
            <div class="func-text">
                <span>生产排产</span>
                <ul>
                    <li>工单按工序拆分成任务单下发到工作站</li>
                    <li>任务单所需物料bom表、输出产量、完成进度显示</li>
                </ul>
            </div>
        </div>
        <div class="func-item">
            <img th:src="@{img/func/测试追溯.jpg}"  alt="...">
            <div class="func-text">
                <span>测试数据追溯</span>
                <ul>
                    <li>产品成型后测试环节数据记录查看</li>
                    <li>产品经过的每个工序测试参数保留</li>
                </ul>
            </div>
        </div>
        <div class="func-item">
            <img th:src="@{img/func/设备管理.jpg}"  alt="...">
            <div class="func-text">
                <span>设备管理</span>
                <ul>
                    <li>车间设备、工作产线设备分配</li>
                    <li>设备保养、易损件更换记录</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>